{{ extend './_layouts/home.html' }}

{{ block 'title' }}
Index Page
{{ /block }}

{{ block 'body' }}
  <div class="container-fluid">
    <div class="row">
      <nav class="col-md-2 d-none d-md-block bg-light sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                <span data-feather="home"></span>
                Dashboard <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/new">
                <span data-feather="file"></span>
                Insert Student
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                <span data-feather="file"></span>
                Update Student
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <h2 style='margin-top:30px'>Home Page</h2>
        <div class="table-responsive" style='margin-top:20px'>
          <table class="table table-striped table-sm">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
                <th>Scores</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {{ each students }}
              <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $value.name }}</td>
                <td>{{ $value.gender == 1 ? '男' : '女' }}</td>
                <td>{{ $value.age }}</td>
                <td>{{ $value.score }}</td>
                <td>
                  <button type="button" class="btn btn-primary btn-sm" onclick="editItem({{ $value._id }})">Edit</button>
                  <button type="button" class="btn btn-danger btn-sm" onclick="deleteItem({{ $value._id }})">Delete</button>
                </td>
              </tr>
              {{ /each }}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  </div>
{{ /block }}

{{ block 'script' }}
<script>
  function editItem(id) {
    //避免URL编码
    location.href = `/update?id=${encodeURI(encodeURI(id))}`
  }

  function deleteItem(id) {
    if (confirm(`Are you sure delete ID is ${id}'s student record?`)) {
      location.href = `/delete?id=${encodeURI(encodeURI(id))}`
    }
  }
</script>
{{ /block }}
